<?php 
    $img = $this->Html->getUrlImage('mapabh.png');
?>
<style type="text/css">
#nao-informado,
#outros{display: none;}    

.regioes {
    font-size: 12px;
    position:relative; 
    float:left; 
    height:355px; 
    width:420px; 
    margin:40px 0 40px 100px; 
    background:url(<?php echo $img; ?>) no-repeat left top;
}

        .regioes li{
            list-style:none; 
            position:absolute; 
            text-align: center;
            height:40px;
            width:100px; 
            line-height: 40px;
            float: left;
        }

                .regioes li a{height:100%; display: block;}

            
#ribeirao-das-neves{margin: 0     0 0 -100px; z-index: 3; width:160px; height:80px; line-height: 80px; }
#vespasiano{        margin: -40px 0 0 10px;   z-index: 3; width:200px;}
#santa-luzia{       margin: -40px 0 0 170px;  z-index: 3; height: 80px; line-height: 80px;}
#contagem{          margin: 120px 0 0 -60px;  z-index: 3;}
#sabara{            margin: 115px 0 0 220px;  z-index: 3; height:50px; line-height: 50px; }
#nova-lima{         margin: 240px 0 0 150px;  z-index: 3;}
#brumadinho{        margin: 360px 0 0 10px;   z-index: 3;}
#ibirite{           margin: 300px 0 0 -80px;  z-index: 3;}
#fora-da-grande-bh{ margin: 100px 0 0 320px; width:160px; height:80px;}

#venda-nova{margin: 0     0 0 62px;   width:79px;  height:83px;  line-height: 83px;}
#pampulha{  margin: 58px  0 0 48px;   width:115px; height:100px; line-height: 100px;}
#norte{     margin: 0px   0 0 120px;  width:105px; height:114px; line-height: 95px;  z-index: 1;}
#nordeste{  margin: 48px  0 0 132px;  width:114px; height:123px; line-height: 123px; z-index: 2;}
#leste{     margin: 125px 0 0 145px;  width:85px;  height:80px;  line-height: 80px;  z-index: 3;}
#noroeste{  margin: 127px 0 0 40px;   width:107px; height:85px;  line-height: 85px;  z-index: 0; }
#centro-sul{margin: 170px 0 0 115px;  width:96px;  height:111px; line-height: 80px;   }
#oeste{     margin: 173px 0 0 55px;   width:85px;  height:98px;  line-height: 82px;  z-index: 1; }
#barreiro{  margin: 220px 0 0 0px;    width:120px; height:132px; line-height: 110px; z-index: 2; }



/*
.regioes li a:hover{color: red;}
  */  
  
.regioes li a:hover{background:url(<?php echo $img; ?>) no-repeat; color: white;}
            
li#outros a:hover,li#nao-informado a:hover,
li#ribeirao-das-neves a:hover,li#vespasiano a:hover,
li#santa-luzia a:hover,li#sabara a:hover,
li#nova-lima a:hover,li#brumadinho a:hover,
li#ibirite a:hover,li#contagem a:hover, li#fora-da-grande-bh a:hover
{background: none; color: red;}

li#venda-nova a:hover{background-position:-13px  -359px;}
li#pampulha a:hover{  background-position:-122px -354px;}
li#norte a:hover{     background-position:-125px -458px;}
li#nordeste a:hover{  background-position:-6px   -440px;}
li#leste a:hover{     background-position:-6px   -789px;}
li#noroeste a:hover{  background-position:-9px   -699px;}
li#centro-sul a:hover{background-position:-127px -571px;}
li#oeste a:hover{     background-position:-128px -684px;}
li#barreiro a:hover{  background-position:-6px   -564px;}
  
.sem_obra{

}
.sem_obra:hover{
    background-position:-2000px -2000px !important;
    color: black;
}
</style>

<ul class="regioes">
<?php 
    foreach($item as $it){
        $url    = $class = "";
        $regiao = $it['regiao'];
        $reg    = GetPlainName($regiao);
        if($it['total'] == 0) {$url = "#"; $class = 'class="sem_obra"';}
        else $url = $this->Html->getLink("tenap/regiao/show/".$it['cod_regiao']."/$reg");
        echo "<li id='$reg'><a href='$url'$class >$regiao</a></li>";
    } 
?>
</ul>

<div class="clear"></div>

